<template>
  <div style="width: 300px">
    <!-- el-form表示整个表单
         el-form-item 表示表单的一项
         表单校验规则四要素
         1. el-form必须关联model属性 值是data中定义的一个对象
         2. el-form必须关联rules属性 值也是data中定义一个的对象
         3. el-form-item必须绑定prop属性 值是当前表单关联的值
         4. el-input表单元素使用v-model双向绑定对应的字段
     -->
    <el-form :model="loginForm" :rules="rules">
      <!-- 账号 -->
      <el-form-item prop="mobile">
        <el-input v-model="loginForm.mobile"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <!-- age -->
      <el-form-item prop="age">
        <el-input v-model.number="loginForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    const ageScope = (rule, value, cb) => {
      // 第二个参数表示输入框输入的值===>效验都是表单,于是会双向绑定
      // console.log(value)
      // 判断一样,先判断为空==>在判断内容===>在判断长度====一步一步判断
      if (!value) return cb(new Error('年龄不能为空'))
      if (isNaN(value)) return cb(new Error('请输入数字'))
      if (value < 6 || value > 18) return cb(new Error('年龄需要在6-18岁之间'))
      cb()
    }
    return {
      loginForm: {
        mobile: '',
        password: '',
        age: ''
      },
      rules: {
        /* 1.必填,手机号需要13开头,然后是11位,是数字
         */
        mobile: [
          { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的11位手机号', trigger: ['blur', 'change'] }
        ],
        password: [
          /* 1.第一步判断非空
          2.第二步判断内容,内容是非空就行
          3.第三步判断长度,在6-12位  */
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\S{6,12}$/, message: '密码需要6-12位', trigger: ['blur', 'change'] }
        ],
        age: [{ validator: ageScope, trigger: ['blur', 'change'] }]
      }
    }
  }
}
</script>

<style>

</style>
